<template>
	<div id="templ">
		<div id="cate">
			<ul id="topbar">
				<li @click="changeimg(0)">全部</li>
				<li v-for="item in cates" @click="changeimg(item.id)">{{item.title}}</li>
			</ul>
		</div>
		<div id="imglist">
			<ul>
	  			<li v-for="item in list">
		  			<router-link :to="'/photo/photoinfo/'+item.id">
		    			<img v-lazy="item.img_url">
		    			<div id="desc">
		    				<h5>{{item.title}}</h5>
		    				<p>{{item.zhaiyao}}</p>
		    			</div>
		    		</router-link>
	  			</li>
			</ul>
		</div>


	</div>
	
</template>


<script>
	export default {
		data:function(){
			return{
				cates:[],
				list:[],
				topid:"0"
			}
		},
		methods:{
			getdata:function(){
				var url = this.$common.apidomain+"/api/getimgcategory";
				this.$http.get(url).then(function(res){
					if(res.body.status!=0) {
						this.Toast(res.body.message);
						returngetimages/0
					}
					this.cates = res.body.message;

				})
			},
			getimg:function(){
				var url = "http://182.254.146.100:8899/api/getimages/"+this.topid;
				this.$http.get(url).then(function(res){
					this.list = res.body.message;
				})
			},
			changeimg:function(id){
				this.topid = id;
				this.getimg();
			}
		},
		created:function(){
			this.getdata();
			this.getimg();
		},
		updated:function(){
			var topbar = document.querySelector("#topbar");
			topbar.style.width = (this.cates.length-0+1)*topbar.children[1].offsetWidth+"px";
		}
	}


</script>



<style scoped>
	#cate{
		width: 375px;
		max-width: 375px;
		overflow-x: auto;
	}
	#cate ul{
		width: 1000px;
		margin: 0px;
		padding-left: 10px;
	}
	#cate li{
		list-style: none;
		display: inline-block;
		color:#0094ff;
		font-size: 14px;
		padding-left: 6px;
	}

	#imglist ul {
		padding-left: 0px;
	}
	#imglist li{
		list-style:none;
		position: relative ;
	}
	#imglist img{
		width:100%;
		height: 300px;
	}

	#desc{
		width: 100%;
		background-color: rgba(0,0,0,0.2);
		position: absolute;
		bottom: 2px;
		left: 0px;
	}

#desc h5{
	color: #ffffff;
	font-weight: bold;
}
#desc p{
	color:#fff;
}

image[lazy=loading] {
	width: 40px;
	height: 300px;
	margin: auto;
}

</style>



<!-- http://182.254.146.100:8899 -->